Part3 - vue user handling
learn basic vue user handling
Table of Content
- live server
- vetur
- material icon theme
Basic struct#
- index.html: contain vue root element
- app.js: create app and mount to the root element
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://unpkg.com/vue@3.0.2"></script>
</head>
<body>
<!--template-->
<div id="app">
<p>{{ title }}</p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
const app = Vue.createApp({
data() {
return {
title: "hello vue"
}
}
})
app.mount('#app')
Bind and event#
vue div
<div id="app">
<p>{{ title }} {{counter}}</p>
<button v-on:click="counter++">inc</button>
<button @click="counter--">dec</button>
<div @click="counter=0">reset</div>
</div>
Note
@ is a shorthand for v-on
v-on:click is @click
methods property#
- Add
methodsproperty to vue app
<div id="app">
<p>{{ title }} {{counter}}</p>
<button @click="reset">reset</button>
<button @click="preset(10)">preset</button>
</div>
const app = Vue.createApp({
data() {
return {
title: "hello vue",
counter: 0
}
},
methods: {
reset(){
this.counter = 0
},
preset(value){
this.counter = value
}
}
})